<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
             width: 500px;
             height: 500px;
             border: 2px solid red;
             background:url(../images/dog.jpg) no-repeat;
             /* 1：background-size: 图片的宽 高; */
             /* background-size: 500px 200px ; */
             /*:2：只写一个参数 肯定是宽度 高度省略了 会等比例缩放 */
             /* background-size: 500px; */
             /* 3里的单位也可以跟百分比 相对于父盒子来参考 */ 
             /* background-size: 50% ; */
             /* 4：cover覆盖：（等比例拉伸）会完全覆盖div盒子 铺满整个父盒子 这样的话就可能会导致背景图片显示不全 */
             /* background-size: cover; */
             /* 5：contain： 高和宽等比例拉伸：当宽度铺满父盒子，高度就不在进行拉伸了。或
                           当高度铺满父盒子，宽度也不再进行拉伸。 这样可能有导致部分空白区域 */
             background-size:contain;



        }
    </style>
</head>
<body>
    <div> </div>
</body>
</html>